<template>
  <div class="box" v-if="Object.keys(detailImgInfo).length !== 0">
    <div class="top">
      <div></div>
    </div>
    <div class="new-listing">{{ detailImgInfo.desc }}</div>
    <div class="bottom">
      <div></div>
    </div>
    <div class="effect">{{ detailImgInfo.detailImage[0].key }}</div>
    <div class="img-list">
      <img
        v-for="item in detailImgInfo.detailImage[0].list"
        :src="item"
        @load="imgLoad"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: 0,
      imging: 0
    };
  },
  props: {
    detailImgInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  // 影响用户体验，只发送一次load事件
  // watch: {
  //  detailImgInfo() {
  //     this.img = this.detailImgInfo.detailImage[0].list;
  //  }
  // },
  methods: {
    imgLoad() {
      // if (++this.imging == this.img.length) {
        this.$emit('imgLoad')
      // } 
    },
  },
};
</script>

<style scoped>
.box {
  padding: 15px;
}

.top div {
  width: 15vh;
  height: 3px;
  border-left: 5px solid #000;
  border-bottom: 2px solid #cecccc;
  margin-bottom: 15px;
}

.bottom div {
  width: 15vh;
  height: 3px;
  border-right: 5px solid #000;
  border-bottom: 2px solid #cecccc;
  margin: 20px 0 15px auto;
}

.new-listing {
  font-size: 14px;
}

.effect {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.img-list img {
  width: 100%;
}
</style>